<template>
	<div>
		<van-tabbar v-model="activeIndex" :fixed="true" :placeholder="true">
			<van-tabbar-item to="/message">
				<span>消息</span>
				<template #icon="props">
					<img :src="props.active ? icon1.active : icon1.inactive" />
				</template>
			</van-tabbar-item>
			<van-tabbar-item to="/train">
				<span>学习培训</span>
				<template #icon="props">
					<img :src="props.active ? icon2.active : icon2.inactive" />
				</template>
			</van-tabbar-item>
			<van-tabbar-item to="/workbench">
				<span>工作台</span>
				<template #icon="props">
					<img  :src="props.active ? icon5.active : icon5.inactive" class="wk-icon"/>
				</template>
			</van-tabbar-item>
			<van-tabbar-item to="/viewer">
				<span>远程协助</span>
				<template #icon="props">
					<img :src="props.active ? icon3.active : icon3.inactive" />
				</template>
			</van-tabbar-item>
			<van-tabbar-item to="/ucenter">
				<span>我的</span>
				<template #icon="props">
					<img :src="props.active ? icon4.active : icon4.inactive" />
				</template>
			</van-tabbar-item>
		</van-tabbar>
	</div>
</template>

<script>
	export default {
		name: 'Foot',
		props: {
			active: {
				type: Number,
				default: 0
			}
		},
		computed: {
			activeIndex: {
				get: function () {
					return this.active;
				},
				set: function () {
				}
			}
		},
		data: function() {
			return {
				icon1: {
					inactive: require('@/assets/images/foot1.png'),
					active: require('@/assets/images/foot1_h.png')
				},
				icon2: {
					inactive: require('@/assets/images/foot2.png'),
					active: require('@/assets/images/foot2_h.png')
				},
				icon3: {
					inactive: require('@/assets/images/foot3.png'),
					active: require('@/assets/images/foot3_h.png')
				},
				icon4: {
					inactive: require('@/assets/images/foot4.png'),
					active: require('@/assets/images/foot4_h.png')
				},
				icon5: {
					inactive: require('@/assets/images/wk-icon.png'),
					active: require('@/assets/images/wk-icon.png')
				}
			}
		},
	}
</script>
